<script setup>
import { useRouter, useRoute } from "vue-router";
import { reactive, ref, watch } from "vue";
import request from "../../utils/request";
import { ElNotification } from "element-plus";
import { IMG_URL } from "@/utils/imgStatic";
import { Delete, Plus, ZoomIn } from "@element-plus/icons-vue";
import moment from "moment";
const tableData = ref([]);
const totalCount = ref(0);
let breadList = []; // 路由集合
const route = useRoute();
const query = reactive({
  jzId: "",
  currentPage: 1,
  pageSize: 3,
});
const centerDialogVisible = ref(false);
const yingpinForm = reactive({
  ypId: "",
  jzId: "",
  ypState: 0,
  jzName: "",
  salary: "",
  phonenumber: "",
  content: "",
  // 新加入的用户信息
  username: "",
  tel: "",
  sex: "",
  age: ""
});
const rules = reactive({
  ypState: [
    {
      required: true,
      message: "请选择岗位审核状态",
      trigger: "change",
    },
  ],
  jzId: [
    {
      required: true,
      message: "请选择兼职的类型",
      trigger: "change",
    },
  ],
  jzName: [
    {
      required: true,
      message: "请输入岗位名称",
      trigger: "blur",
    },
  ],
  salary: [
    {
      required: true,
      message: "请输入薪资",
      trigger: "blur",
    },
  ],
  phonenumber: [
    {
      required: true,
      min: 11,
      max: 11,
      message: "请输入11位的商户电话",
      trigger: "blur",
    },
  ],
  content: [
    {
      required: true,
      message: "请输入岗位详情",
      trigger: "blur",
    },
  ],
  username: [
    {
      required: true,
      message: "请输入用户姓名",
      trigger: "blur",
    },
  ],
  tel: [
    {
      required: true,
      min: 11,
      max: 11,
      message: "请输入11位的用户电话",
      trigger: "blur",
    },
  ],
  sex: [
    {
      required: true,
      message: "请输入用户性别",
      trigger: "blur",
    },
  ],
  age: [
    {
      required: true,
      message: "请输入用户年龄",
      trigger: "blur",
    },
  ],
});
const yingpinFormRef = ref();

const getBreadcrumb = (url) => {
  let matched = url.matched;
  if ("Home" == matched[0].name) {
    matched[0].meta = { title: "系统首页" };
  }
  breadList = matched;
};
watch(
  route,
  (newValue, oldValue) => {
    getBreadcrumb(newValue);
  },
  { deep: true, immediate: true }
);

const getData = () => {
  request
    .get("/yingpin/getAllYingPinsByPage", {
      params: {
        jzId: query.jzId,
        currentPage: query.currentPage,
        pageSize: query.pageSize,
      },
    })
    .then((res) => {
      tableData.value = res.data.data.rows;
      totalCount.value = res.data.data.count;
    })
    .catch((e) => {
      console.log(e);
    });
};
getData();

const handleSearch = () => {
  getData();
};

const handleCurrentChange = (val) => {
  query.currentPage = val;
  getData();
};

const handleDelete = (index, row) => {
  request
    .delete("/yingpin/delete", {
      params: {
        ypId: row.ypId,
      },
    })
    .then((res) => {
      if (res.data.msg == "success") {
        getData();
        ElNotification({
          title: "删除成功",
          message: "成功删除应聘信息",
        });
      } else {
        ElNotification({
          title: "删除失败",
          message: "请联系管理员检查失败原因",
        });
      }
    })
    .catch((e) => {
      ElNotification({
        title: "删除失败",
        message: "请联系管理员检查失败原因",
      });
    });
};

const handleEdit = (index, row) => {
  centerDialogVisible.value = true;
  yingpinForm.ypId = row.ypId;
  yingpinForm.jzId = row.jzId;
  yingpinForm.ypState = row.ypState;
  yingpinForm.jzName = row.jzName;
  yingpinForm.salary = row.salary;
  yingpinForm.phonenumber = row.phonenumber;
  yingpinForm.content = row.content;
  // 设置用户信息
  yingpinForm.username = row.username;
  yingpinForm.tel = row.tel;
  yingpinForm.sex = row.sex;
  yingpinForm.age = row.age;
};

const cancel = (formEl) => {
  centerDialogVisible.value = false;
};

const resetForm = (formEl) => {
  if (!formEl) return;
  formEl.resetFields();
};

const submitForm = async (formEl) => {
  if (!formEl) return;
  await formEl.validate((valid, fields) => {
    const formData = new FormData();
    formData.append("ypId", yingpinForm.ypId);
    formData.append("jzId", yingpinForm.jzId);
    formData.append("ypState", yingpinForm.ypState);
    formData.append("jzName", yingpinForm.jzName);
    formData.append("salary", yingpinForm.salary);
    formData.append("phonenumber", yingpinForm.phonenumber);
    formData.append("content", yingpinForm.content);
    // 用户信息也需要提交
    formData.append("username", yingpinForm.username);
    formData.append("tel", yingpinForm.tel);
    formData.append("sex", yingpinForm.sex);
    formData.append("age", yingpinForm.age);
    if (valid) {
      request
        .patch("/yingpin/update", formData, {
          headers: {
            "Content-Type":
              "multipart/form-data;charset=UTF-8; boundary=<calculated when request is sent>",
          },
        })
        .then((res) => {
          if (res.data.code == 200) {
            ElNotification({
              title: "更新成功",
              message: "成功更新应聘信息",
            });
            centerDialogVisible.value = false;
            getData();
          } else {
            ElNotification({
              title: "更新失败",
              message: "请联系管理员检查失败原因",
            });
          }
        })
        .catch((e) => {
          ElNotification({
            title: "更新失败",
            message: "请联系管理员检查失败原因",
          });
        });
    } else {
      ElNotification({
        title: "校验失败",
        message: "请重新填写信息",
      });
    }
  });
};

let categoryData = reactive([]);

const getCategory = () => {
  request
    .request({
      url: "/category/getAllCategory",
      method: "get",
    })
    .then((res) => {
      res.data.data.forEach((e) => {
        categoryData.push(e);
      });
    })
    .catch((e) => {
      console.log(e);
    });
};
getCategory();
</script>

<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item
          v-for="(item, index) in breadList"
          :key="index"
          :to="{ path: item.path }"
          >{{ item.meta.title }}
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <el-select
          v-model="query.jzId"
          placeholder="岗位分类"
          class="handle-select mr10"
        >
          <el-option label="全部岗位" key="" value=""></el-option>
          <el-option
            v-for="(item, index) in categoryData"
            widget="150"
            :key="index"
            :label="item.catName"
            :value="item.catId"
          >
          </el-option>
        </el-select>
        <el-button type="primary" icon="el-icon-search" @click="handleSearch">
          搜索
        </el-button>
      </div>
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          prop="ypId"
          label="ID"
          width="55"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="jzId"
          label="岗位类型"
          width="100"
          align="center"
        >
          <template #default="scope">
            {{
              categoryData.filter((e) => {
                return scope.row.jzId == e.catId;
              })[0]?.catName
            }}
          </template>
        </el-table-column>
        <el-table-column
          prop="jzName"
          label="岗位名称"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="salary"
          label="薪资"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="phonenumber"
          label="商户电话"
          width="110"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="content"
          label="岗位内容"
          width="200"
          align="center"
        ></el-table-column>
        <!-- 新添加的用户信息 -->
        <el-table-column
          prop="username"
          label="用户名"
          width="100"
          align="center"
        ></el-table-column>
        <el-table-column
          prop="tel"
          label="用户电话"
          width="110"
          align="center"
        ></el-table-column>
        <el-table-column prop="sex" label="性别" width="100" align="center">
          <template #default="scope">
            <el-tag>
              {{ scope.row.sex == "1" ? "男" : "女" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="age"
          label="年龄"
          width="100"
          align="center"
        ></el-table-column>
        <!-- 新添加结束 -->
        <el-table-column
          prop="ypState"
          label="岗位审核状态"
          width="110"
          align="center"
        >
          <template #default="scope">
            <el-tag
              :type="
                scope.row.ypState == '1'
                  ? 'success'
                  : scope.row.ypState == '0'
                  ? 'danger'
                  : scope.row.ypState == '2'
                  ? 'warning'
                  : ''
              "
            >
              {{
                scope.row.ypState == "1"
                  ? "审核通过"
                  : scope.row.ypState == "0"
                  ? "未审核"
                  : scope.row.ypState == "2"
                  ? "审核不过"
                  : "未知"
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button
              type="text"
              icon="el-icon-edit"
              @click="handleEdit(scope.$index, scope.row)"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定要删除此门票"
              confirm-button-text="确定"
              cancel-button-text="取消"
              @confirm="handleDelete(scope.$index, scope.row)"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination">
        <el-pagination
          v-if="totalCount"
          v-model:currentPage="query.currentPage"
          v-model:page-size="query.pageSize"
          layout="prev, pager, next, jumper"
          :total="totalCount"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <el-dialog
      v-model="centerDialogVisible"
      title="门票编辑"
      width="40%"
      :before-close="cancel"
    >
      <el-scrollbar height="300px">
        <el-form
          ref="yingpinFormRef"
          :model="yingpinForm"
          :rules="rules"
          label-width="120px"
          status-icon
        >
          <el-form-item label="岗位类型" prop="jzId">
            <el-select
              v-model="yingpinForm.jzId"
              placeholder="岗位"
              class="handle-select mr10"
              width="150"
            >
              <el-option
                v-for="(item, index) in categoryData"
                :key="index"
                :label="item.catName"
                :value="item.catId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="岗位名称" prop="jzName">
            <el-input v-model="yingpinForm.jzName"></el-input>
          </el-form-item>
          <el-form-item label="薪资" prop="salary">
            <el-input v-model="yingpinForm.salary"></el-input>
          </el-form-item>
          <el-form-item label="商户电话" prop="phonenumber">
            <el-input v-model="yingpinForm.phonenumber"></el-input>
          </el-form-item>
          <el-form-item label="岗位内容" prop="content">
            <el-input v-model="yingpinForm.content"></el-input>
          </el-form-item>
          <!-- 新添加的用户信息表单项 -->
          <el-form-item label="用户名" prop="username">
            <el-input v-model="yingpinForm.username"></el-input>
          </el-form-item>
          <el-form-item label="用户电话" prop="tel">
            <el-input v-model="yingpinForm.tel"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="yingpinForm.sex">
              <el-radio label="男">男</el-radio>
              <el-radio label="女">女</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="年龄" prop="age">
            <el-input v-model="yingpinForm.age" type="number"></el-input>
          </el-form-item>
          <!-- 新添加结束 -->
          <el-form-item label="岗位审核状态" prop="ypState">
            <el-radio-group v-model="yingpinForm.ypState">
              <el-radio :label="0">未审核</el-radio>
              <el-radio :label="1">审核通过</el-radio>
              <el-radio :label="2">审核不过</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
      </el-scrollbar>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm(yingpinFormRef)"
            >更新</el-button
          >
          <el-button @click="resetForm(yingpinFormRef)">重置表单</el-button>
          <el-button @click="cancel(yingpinFormRef)">取消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.handle-box {
  margin-bottom: 20px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 300px;
  display: inline-block;
}

.table {
  width: 100%;
  font-size: 14px;
}

.red {
  color: #ff0000;
}

.mr10 {
  margin-right: 10px;
}

.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
